<template>
	<view class="container">
		<view class="nav-wrap" id='nav-wrap' :style="{height:fixedNavHeight+'px'}">
			<view class="nav-main" :style="{height:fixedNavHeight+'px'}">
				<view class="nav-inner"
					:style="{background:background,backgroundSize:bgSize,paddingTop:statusBarHeight+'px'}">
					<view class="head-inner">
						<view class='head-con'>
							<view class="back-icon" @tap='backEv'>
								<uni-icons type="left" size="20" color="#fff"></uni-icons>
							</view>
							<view class="title">订单明细</view>
						</view>
					</view>
					<view class="search-wrap">
						<view class="search-main line-v-center">
							<view class="search-icon">
								<uni-icons type="search" color="#999" size="20"></uni-icons>
							</view>
							<view class="search-con">
								<input type='text' placeholder="输入订单编号搜索" v-model="keyword" confirm-type='search' @confirm='toSearch'
									@input='getValue' />
							</view>
							<view class="close-btn line-center" @tap='delSearchData' v-if='showDel'>
								<uni-icons type="clear" color="#999" size="20"></uni-icons>
							</view>
							<view class="line"></view>
							<view class="btn line-center" @tap='toSearch'>搜索</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg">
			<image src='https://zczg.sxruanjian.cn/static/img/user.png'>
			</image>
		</view>
		<view class="wrap" v-if='showPage'>
			<template v-if='list.length > 0'>
				<view class="order-item" v-for="(item,index) in list" :key="index">
					<view class="order-top">
						订单号：{{item.order_sn}} | <text @tap="copy(item.order_sn)">复制</text>
					</view>
					<view class="goods-wrap">
						<view class="goods-info-wrap" v-for='(goodsItem,goodsIndex) in item.order_item'
							:key="goodsIndex">
							<view class="goods-image">
								<image :src='goodsItem.g_pic'></image>
							</view>
							<view class="goods-right">
								<view class="goods-name">{{goodsItem.goodname}}</view>
								<view class="goods-price-wrap">
									<view class="goods-price">
										¥{{goodsItem.price}}
									</view>
									<view class="num">x{{goodsItem.nums}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order-bottom">
						<view class="time">{{item.add_time}}</view>
						<view class="goods-total">
							共1件商品，实付：<text>¥{{item.final_money}}</text>
						</view>
					</view>
				</view>
			</template>
			<view class="mt" v-else>
				<no-data text='暂无数据'></no-data>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				hostUrl: app.globalData.hostUrl,
				background: `url(${app.globalData.hostUrl}/static/img/user.png)`,
				bgSize: '100% 420rpx',
				headAllHeight: app.globalData.headAllHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				fixedNavHeight: app.globalData.headAllHeight + 50,
				month: '',
				childUid: '',
				showPage: false,
				list: [],
				showDel: false,
				keyword:''
			};
		},
		onLoad(option) {
			this.month = option.month;
			this.childUid = option.u_id;
			this.getOrder()
		},
		onPullDownRefresh() {
			this.list = [];
			this.getOrder();
			uni.stopPullDownRefresh()
		},
		methods: {
			getValue(e) {
				const that = this;
				const v = this.trim(e.detail.value);
				that.keyword = v;
				that.showDel = true;
				if (!that.keyword) {
					that.showDel = false;
				}
			},
			toSearch(e) {
				const keyword = e.type == 'confirm' ? this.trim(e.detail.value) : this.trim(this.keyword);
				this.keyword = keyword;
				this.list = [];
				this.getOrder()
			},
			/* 删除搜索数据 */
			delSearchData() {
				this.keyword = '';
				this.list = [];
				this.getOrder()
			},
			getOrder() {
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				const that = this;
				app.globalRequest({
					api: app.getApi().user.childOrder,
					data: {
						month: that.month,
						child_uid: that.childUid,
						keyword:that.keyword
					}
				}).then(res => {
					console.log('res', res)
					that.showPage = true;
					if (res.code == 0) {
						that.list = res.data;
					}
				}).catch(err => {

				})
			},
			copy(code) {
				uni.setClipboardData({
					data: code, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			trim(str, pos = 'both') {
				str = String(str)
				if (pos == 'both') {
					return str.replace(/^\s+|\s+$/g, '')
				}
				if (pos == 'left') {
					return str.replace(/^\s*/, '')
				}
				if (pos == 'right') {
					return str.replace(/(\s*$)/g, '')
				}
				if (pos == 'all') {
					return str.replace(/\s+/g, '')
				}
				return str
			},
			backEv(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}
</style>
<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.bg {
		width: 100%;
		height: 420rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.nav-wrap {
		width: 100%;
	}

	.nav-main {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 30;
	}

	.head-inner {
		width: 100%;
		height: 44px;
	}

	.head-con {
		width: 100%;
		height: 44px;
		position: relative;
		z-index: 3;
		height: 100%;
		padding-left: 24rpx;
		font-family: YouSheBiaoTiHei;
		display: flex;
		align-items: center;

		.back-icon {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: 0rpx;
			top: 50%;
			margin-top: -30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 16rpx;
				height: 28rpx;
			}
		}

		.title {
			width: 300rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-family: PingFangSC-Regular;
			color: #fff;
		}
	}

	.search-wrap {
		width: 100%;
		height: 50px;
		position: relative;
		z-index: 22;
	}

	.search-main {
		width: 702rpx;
		height: 40px;
		padding: 0 8rpx 0 20rpx;
		box-sizing: border-box;
		border-radius: 20px;
		background: #fff;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.search-con {
			flex: 1;
			height: 100%;
			padding-left: 10rpx;

			input {
				width: 100%;
				height: 100%;
				font-size: 28rpx;
			}
		}

		.close-btn {
			width: 50rpx;
			height: 50rpx;
			border-radius: 30rpx;
			flex-shrink: 0;
		}

		.line {
			width: 2rpx;
			height: 30rpx;
			background-color: #999;
			margin: 0 20rpx 0 16rpx;
		}

		.btn {
			width: 146rpx;
			height: 32px;
			background: #FA5E41;
			border-radius: 16px;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.wrap {
		margin: 24rpx 24rpx;

		position: relative;
		z-index: 2;
		padding-bottom: 100rpx;
	}

	.order-item {
		padding: 18rpx 24rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 24rpx;

		.order-top {
			font-size: 24rpx;
			display: flex;
			align-items: center;

			text {
				color: #FA5E41;
				margin-left: 10rpx;
			}
		}

		.goods-info-wrap {
			display: flex;
			padding: 24rpx 0;

			.goods-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
				overflow: hidden;
				flex-shrink: 0;
				margin-right: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.goods-right {
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods-name {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 26rpx;
				}

				.goods-price-wrap {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #303133;
				}
			}

		}

		.order-bottom {
			display: flex;
			justify-content: space-between;
			color: #303133;
			font-size: 24rpx;

			.goods-total {
				text {
					font-weight: bold;
				}
			}
		}
	}
	.mt{
		margin-top:280rpx
	}
</style>